<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客登录页</title>
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/blog_login.css">

    <!--     加载 static底下的 favicon.ico 图标-->
    <link rel="shortcut icon" href="/favicon.ico"/>
    <link rel="bookmark" href="/favicon.ico"/>
</head>
<body>
<!-- 导航栏 -->
<div class="nav">

    <!-- <img src="image/img1.jpg" alt="加载失败" > -->
    <img src="image/img1.jpg" alt="图片加载失败">
    <span class="title">筱的博客</span>

    <!-- 此标签用于占位 分隔 -->
    <div class="spacer"></div>

    <a href="find_password.html" >忘记密码</a>

<!--    <button class="tourist" style="font-family: 楷体;
    color: rgb(223, 229, 243);
    width: 70px;
    background-color: grey;
    text-align: center;

    height: 25px;
    font-size:15px;
    margin: 0 6px;cursor: pointer;
">游客访问</button>-->

</div>

<!-- 登录页面容器 整个页面框-->
<!-- 通过此页面框 在其内部设计登录框 可以通过弹性布局让其水平垂直居中 -->
<!-- 如果直接弄登录框 那就得设计外边距等使其水平垂直对齐 -->
<div class="login-container">

    <!-- 登录指示 样式 页面里的登录框-->
    <div class="dialog">
        <h2>账号登录</h2>


        <div class="row">
                <span>
                    <b>用户名</b>
                </span>
            <!-- placeholder属性 使在框中没有字时默认显示的信息 -->
            <input type="text" id="username" placeholder="输入用户名或邮箱地址">
        </div>
        <div class="row">
                <span style="margin-left: 9px">
                    <b >密码</b>
                </span>
            <input type="password" id="password" placeholder="输入登录密码" style="width: 173px">
            <span style="background-color: white; height: 35px; width: 28px" >
                <svg  id="hide" cursor="pointer"  t="1711678155784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9919" width="28" height="28"><path d="M332.8 729.6l34.133333-34.133333c42.666667 12.8 93.866667 21.333333 145.066667 21.333333 162.133333 0 285.866667-68.266667 375.466667-213.333333-46.933333-72.533333-102.4-128-166.4-162.133334l29.866666-29.866666c72.533333 42.666667 132.266667 106.666667 183.466667 192-98.133333 170.666667-243.2 256-426.666667 256-59.733333 4.266667-119.466667-8.533333-174.933333-29.866667z m-115.2-64c-51.2-38.4-93.866667-93.866667-132.266667-157.866667 98.133333-170.666667 243.2-256 426.666667-256 38.4 0 76.8 4.266667 110.933333 12.8l-34.133333 34.133334c-25.6-4.266667-46.933333-4.266667-76.8-4.266667-162.133333 0-285.866667 68.266667-375.466667 213.333333 34.133333 51.2 72.533333 93.866667 115.2 128l-34.133333 29.866667z m230.4-46.933333l29.866667-29.866667c8.533333 4.266667 21.333333 4.266667 29.866666 4.266667 46.933333 0 85.333333-38.4 85.333334-85.333334 0-12.8 0-21.333333-4.266667-29.866666l29.866667-29.866667c12.8 17.066667 17.066667 38.4 17.066666 64 0 72.533333-55.466667 128-128 128-17.066667-4.266667-38.4-12.8-59.733333-21.333333zM384 499.2c4.266667-68.266667 55.466667-119.466667 123.733333-123.733333 0 4.266667-123.733333 123.733333-123.733333 123.733333zM733.866667 213.333333l29.866666 29.866667-512 512-34.133333-29.866667L733.866667 213.333333z" fill="#444444" p-id="9920"></path></svg>
            <svg  id="display"   cursor="pointer" t="1711678493313" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10393" width="28" height="28"><path d="M512 298.666667c-162.133333 0-285.866667 68.266667-375.466667 213.333333 89.6 145.066667 213.333333 213.333333 375.466667 213.333333s285.866667-68.266667 375.466667-213.333333c-89.6-145.066667-213.333333-213.333333-375.466667-213.333333z m0 469.333333c-183.466667 0-328.533333-85.333333-426.666667-256 98.133333-170.666667 243.2-256 426.666667-256s328.533333 85.333333 426.666667 256c-98.133333 170.666667-243.2 256-426.666667 256z m0-170.666667c46.933333 0 85.333333-38.4 85.333333-85.333333s-38.4-85.333333-85.333333-85.333333-85.333333 38.4-85.333333 85.333333 38.4 85.333333 85.333333 85.333333z m0 42.666667c-72.533333 0-128-55.466667-128-128s55.466667-128 128-128 128 55.466667 128 128-55.466667 128-128 128z" fill="#444444" p-id="10394"></path></svg>
            </span>

        </div>

        <div class="row">
                <span>
                    <b>验证码</b>
                </span>


            <input type="text" id="judgetext" placeholder="输入验证码">

            <!--            <div class="judgenumber">123</div>-->
            <img id="captchaimg" src="/home/captcha" style="cursor: pointer" title="验证码看不清？ 单击一下试试~">

        </div>
        <!-- 这里存放错误信息 -->
        <div class="error">

        </div>


        <div class="row">
            <!-- 换成submit提交标签按钮 -->
            <!-- <a id="submit" href ="blog_list.html">登录</a> -->
            <button id="submit">登录</button>
        </div>

        </form>

        <div class="mes">
            <div class="show">还没有账号?</div>
            <div class="attention">
                点击这里去注册
            </div>
        </div>
    </div>

</div>

<!--<script src="../../../../../captcha/src/main/resources/static/jquery.js"></script>-->
<script src="js/jquery.js"></script>
<script>
    let username = document.querySelector('#username');
    let password = document.querySelector('#password');
    let h=document.querySelector('#hide');
    let d=document.querySelector('#display');

    let judgetext = document.querySelector('#judgetext');
    let error = document.querySelector('.error');
    let button = document.querySelector('#submit');
    error.innerHTML = '';

    //  单击显示 隐藏密码
    d.onclick=function (){
         d.id="hide";
        password.type='text';
         h.id="display";
    }
    h.onclick=function (){
        h.id='hide';
        password.type='password';
        d.id='display';
    }
    <!--    单击验证码图片 进行更新 ..-->
    $("#captchaimg").click(function () {
        $(this).hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
    });

    let attention = document.querySelector('.attention');
    attention.onclick = function () {
        location.assign("blog_register.html");
    }

    button.onclick = function () {
        // 恢复密码样式
        password.type="password";
        if (
            username.value == '') {
            username.focus();
            error.innerHTML = '用户名不能为空!';
            $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();

        } else if (password.value == '') {
            password.focus();
            error.innerHTML = '密码不能为空!';

            $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
        } else if (judgetext.value == '') {
            judgetext.focus();
            error.innerHTML = '验证码不能为空!';

            $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
        } else {
            let user = {
                "username": username.value,
                "password": password.value,
                "captcha": $("#judgetext").val()
                // "loginTime" : new Date()  日期由后端设置
            };
            // 禁止单击
            button.className="forbid";
            error.innerHTML = '请稍等, 正在登录博客系统...';

            $.ajax({
                url: 'user/login',
                type: 'post',
                data: user,
                success: function (body) {
                    if (body != null && body.code == 200) {
                        if (body.data == true) {
                            alert("茫茫人海中,遇见即是缘分,感谢您访问筱的个人博客系统~");
                        }
                        location.assign("blog_lists.html");
                    } else {
                        error.innerHTML = body.msg;
                        // 刷新验证码
                        $("#captchaimg").hide().attr('src', '/home/captcha?dt=' + new Date().getTime()).fadeIn();
                    }
                    // 响应后恢复单击效果
                    button.className="allow";
                }
            });
        }
    }

    username.focus();

    // 键盘单击事件
    window.onkeydown=function(ev){
        if(ev.keyCode==13){  // 当单击了回车按键  执行下面逻辑 跳转到 没有填写数据的框, 全部填写后 执行登录请求
            if(username.value==''){
                username.focus();
            }
            if(username.value !=''&&password.value ==''){
                password.focus();
            }

            if(password.value!=''&&password.value!=''&&judgetext.value==''){
                judgetext.focus();
            }

            if(password.value!=''&&password.value!=''&&judgetext.value!=''){
                button.onclick();
            }
        }



    }

    let tourist=document.querySelector('.tourist');
    tourist.onclick=function (){
        tourist.className="forbid";
        $.ajax({
            url:"/user/tourist",
            type: "post",
            success: function (data){
                if(data.code==200&&data.data){
                    alert('欢迎访问筱的个人博客系统~');
                    location.assign("blog_lists.html");
                }else{
                    alert(data.msg);
                    button.className="allow";
                }
            }
        });
    }



</script>
</body>
</html>